<template>
  <view class="birthday">
    <image
      class="bg"
      mode="widthFix"
      :src="defStatus === EnumStatus.STATUS ? EnumBG.BCG1 : EnumBG.BCG2"
    ></image>
    <BirthdayInput   v-if="defStatus === EnumStatus.STATUS" v-model:content="content" v-model:defStatus="defStatus"/>
    <BirthdayResult v-else :content="content" v-model:defStatus="defStatus"  />
    <Recommend :top='98'/>
  </view>
  <ToDY />
  
</template>

<script setup lang="ts">
import {  EnumBG } from "@/utils/content";
import { EnumStatus } from "@/utils/constants";
import BirthdayInput from "./components/BirthdayInput.vue";
import BirthdayResult from "./components/BirthdayResult.vue";
import ToDY from "@/components/ToDY/ToDY.vue";
import Recommend from "@/components/Recommend/Recommend.vue";

const defStatus = ref(EnumStatus.STATUS)
const content = ref()

</script>

<style>
page {
  width: 100%;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.birthday{
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    .bg{
      width: 100%;
    }
}
</style>